<template>
  <view class="photo-choose-section">
    <button @click="chooseAndPreviewImage">选择本地图片并预览</button>
    <image v-if="localImage" :src="localImage" mode="widthFix" class="image-preview"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      localImage: ''
    }
  },
  methods: {
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths[0];
          this.localImage = tempFilePaths;
          // 预览图片
          uni.previewImage({
            current: tempFilePaths,
            urls: [tempFilePaths]
          });
        }
      });
    }
  }
}
</script>

<style>
.photo-choose-section {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.image-preview {
  width: 100%;
  margin-top: 20rpx;
}
</style>